<{include file="Common/head"}>
<{include file="Common/menu" }>

<!--图表js-->


<script type="text/javascript" src="_index_/echarts/echarts.min.js"></script>
<script type="text/javascript" src="_index_/laydate/laydate.js"></script>
<style type="text/css">
    *{font-size: 15px!important;}
    .select{
        width:200px;
        height:40px;
        position: relative;
        top: 2px;
    }
    .date_range{
        padding-left: 10px;
        height: 38px;
        min-width: 262px;
        line-height: 38px;
        border: 1px solid #e6e6e6;
        background-color: #fff;
        border-radius: 2px;
    }
    #ansy_main{
        width: 1300px;
        position: relative;
        left: 13%;
        top: 50px;
        height: 800px;
    }
    #main{
        float: left;
    }
    #ansy_bt{
        width: 72px;
        height: 35px;
        position: relative;
        left: 20px;
    }
    #zhexian{
        float: left;
    }
    .xz{
        width:100%;
        height:150px;
    }
</style>

<section class="Hui-article-box">
    <div id="ansy_main">
        <div class="xz">
            <span style="margin-left: 250px;">筛选条件：</span>
            <input type="text" class="date_range" placeholder="请选择日期范围" id="test1">
            <select class="select valid fromtype" size="1" name="city" style="display: none;">
                <option value="" selected="">请选择类型</option>
                <option value="渠道">渠道</option>
                <option value="项目">项目</option>
            </select>
            <select class="select valid maptype" size="1" name="city" style="display: none;">
                <option value="" selected="">请选择类型</option>
                <option value="折线图">折线图</option>
                <option value="圆饼图">圆饼图</option>
            </select>
            <input class="btn btn-success radius" id="ansy_bt" type="button" value="生成">
        </div>
        <div id="main" style="width: 600px;height:400px;"></div>
        <div id="zhexian" style="width: 600px;height:400px;"></div>
    </div>
</section>





<script>
    //执行一个laydate实例
    laydate.render({
        elem: '#test1', //指定元素
        range: true
    });

    $("#ansy_bt").on('click',function(){
        date_range = $('.date_range').val();
        //from_type = $('.fromtype').val();
        from_type = "渠道";
        //map_type = $('.maptype').val();
        map_type = "圆饼图";

        console.log(date_range);


        $.post("/index/Index/ansyfrom",{"date_range":date_range,"from_type":from_type,"map_type":map_type},function(e){
            console.log(eval('(' + e + ')'));

            obj = eval('(' + e + ')');

            console.log(obj['pie']);
            console.log(obj['zx']);
            //调用生成函数
            xutuo(eval('(' + obj['pie'] + ')'),eval('(' + obj['zx'] + ')'));
        });


    });

</script>


<script type="text/javascript">


    //生成图像js，需要传入参数；
function xutuo(data,zxdata){
    var myChart = echarts.init(document.getElementById('main'));
    option = data;
    myChart.setOption(option);


    var zx_myChart = echarts.init(document.getElementById('zhexian'));
    zx_option = zxdata;
    zx_myChart.setOption(zx_option);

}

    </script>

<{include file="Common/footer"}>